<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch"
          action="${request.getContextPath()}/stageWipProfile/stageWipProfileChart" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="wiplotpush"/>
            %{--<label>Tech/type：</label>--}%
            %{--<g:select name="materia" from="${materiaType}" data-toggle="selectpicker" data-live-search="true"--}%
                      %{--optionKey="label" optionValue="value" value="${materia}" data-nextselect="#partName"--}%
                      %{--data-width="200"--}%
                      %{--data-refurl="${request.getContextPath()}/JsonData/getOptionHTMLByTarget?materia={value}&SYS_QUERY_NAME=partList"--}%
                      %{--noSelection="['': '===请选择===']"/>&nbsp;--}%
            %{--<label>prod（产品名称）：</label>--}%
            %{--<g:select name="name" from="${partList}" data-toggle="selectpicker" data-live-search="true"--}%
                      %{--optionKey="label" optionValue="value" value="${name}" id="partName" data-width="200"--}%
                      %{--noSelection="['': '===请选择===']"/>--}%
            %{--<input name="time" type="radio" value="1" <g:if test="${time == '1'}">checked="checked"</g:if>/>--}%
            %{--<label>DTN</label>--}%
            %{--<input name="time" type="radio" value="2" <g:if test="${time == '2'}">checked="checked"</g:if>/>--}%
            %{--<label>history</label>--}%
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
        </div>
    </form>
</div>

<div class="bjui-pageContent">
    <div style="margin: auto 0; width:99%;">
        <div class="row" style="padding: 0 8px;">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div style="mini-width:800px;height:600px;" id="profile"
                             data-url="${request.getContextPath()}/stageWipProfile/stageWipProfileChart"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="${request.getContextPath()}/js/echarts/echarts.js"></script>
<script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('profile'));
    var contextPath = "${request.getContextPath()}";
    var data = [];
    <g:each in="${stageWipProfileChart}" status="i" var="profile">
    data.push('${profile.STAGE_ID}')
    </g:each>
    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter: function (params) {
                var html = '';
                if (params.length > 0) {
                    Xindex = params[0].dataIndex;
                    for (var int = 0; int < params.length; int++) {
                        html += params[int].seriesName + ':' + params[int].data + '<br>';
                    }
                }
                return html;

            }
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        legend: {
            data: ['Run', 'Wait', 'Hold', 'Move', 'target', 'acc.wip']
        },
        grid: {
            left: '1%',
            right: '1%',
            bottom: '19%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: data,
                axisLabel: {
                    interval: 0,
                    rotate: 90
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                min: 0,
            },
            {
                type: 'value',
                min: 0,
            }
        ],
        series: [
            {
                name: 'Hold',
                type: 'bar',
                stack: 'state',

                data: ${stageWipProfileChart.Hold_QTY},
                itemStyle: {
                    normal: {color: '#EB504C'}

                }
            },
            {
                name: 'Wait',
                type: 'bar',
                stack: 'state',

                data:  ${stageWipProfileChart.WAIT_QTY},
                itemStyle: {
                    normal: {color: '#84B4E0'}
                }
            },
            {
                name: 'Run',
                type: 'bar',
                stack: 'state',
                data:  ${stageWipProfileChart.RUN_QTY},
                itemStyle: {
                    normal: {color: '#92D050'}
                }
            },
            {
                name: 'Move',
                type: 'line',
                yAxisIndex: 1,
                showSymbol: false,
                hoverAnimation: false,
                data: ${stageWipProfileChart.MOVE},
                itemStyle: {
                    normal: {color: '#BF9000'}
                }
            },
            {
                name: 'target',
                type: 'line',
                yAxisIndex: 1,
                showSymbol: false,
                hoverAnimation: false,
                data: ${stageWipProfileChart.TARGET},
                itemStyle: {
                    normal: {color: '#FF0000'}
                }
            },
            {
                name: 'acc.wip',
                type: 'line',
                yAxisIndex: 1,
                showSymbol: false,
                hoverAnimation: false,
                data: ${stageWipProfileChart.ACC_WIP},
                itemStyle: {
                    normal: {color: '#D8E2F3'},
                }
            }

        ]
    };
    ;
    // 使用刚指定的配置项和数据显示图表。
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    myChart.on('click', function (params) {
        console.log(params);
        var url = "${request.getContextPath()}/stageWipProfile/stageWipProfileDetails?stage=" + params.name
        $(this).dialog({
            id: 'mydialog',
            url: url,
            width: 1200,
            height: 400,
            title: 'Stage：' + params.name
        });

    });

</script>